<template>
	<view class="container">
		<view class="back_img"></view>
		<view class="list_container">
			<div class="title">
				分享链接及二维码
			</div>
			<view class="modal">
				<view class="img_container">
					<image :src="qrcode" style="width: 100%;height: 100%;" show-menu-by-longpress="true"></image>
				</view>
				<view class="code_copy" @click="getLink()">复制链接</view>
				<view class="modal_tip">
					注：此二维码和链接可用于邀请未进入过小程序的用户，若用户扫描此二维码或点击链接，则可自动成为您的客户
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPersonQrCode,
		getAgentToken,
		getAgentRecordList,
		getPersonShortLink
	} from "../../../api/agent.js"
	export default {
		data() {
			return {
				modalFlag: false,
				qrcode: "",
				agentId: "",
				agentToken: "",
				companyName: "",
				profit: "",
				agentList: [],
				totalAmount: 0,
				commissionAmount: 0,
				pageParam: {
					pageIndex: 1,
					pageSize: 10,
				}
			}
		},
		onLoad(options) {
			console.log("options", options);
			this.agentId = Number(options.agentId);
		},
		onShow() {
			this.pageParam.pageIndex = 1
			this.agentList = []
			this.getList();
			this.getPersonQrCode();
		},
		methods: {
			//打开模态框
			showModal(){
				this.modalFlag = true;
				// 获取二维码
				this.getPersonQrCode()
			},
			
			//关闭模态框
			closeModal() {
				this.modalFlag = false
			},

			// 获取数据
			async getList() {
				let req = {
					agentID: this.agentId,
					pageIndex: this.pageParam.pageIndex,
					pageSize: this.pageParam.pageSize
				}
				const res = await getAgentRecordList(req)
				if (res) {
					this.companyName = res.companyName
					this.agentList = this.agentList.concat(res.items)
					this.totalAmount = res.totalAmount;
					this.commissionAmount = res.commissionAmount;
					this.profit = res.profit;
				} else {
					this.agentList = []
				}
			},

			//加载更多
			loadMore() {
				this.pageParam.pageIndex++
				this.getList()
			},

			//生成二维码
			async getPersonQrCode() {
				const res = await getPersonQrCode()
				this.qrcode = res
			},

			//获取短链接
			async getLink() {
				const res = await getPersonShortLink()
				console.log("短链接", res);
				if (res) {
					console.log("获取到了短链接",res);
					wx.setClipboardData({
						data: res,
						success(res1) {
							wx.getClipboardData({
								success(res1) {  
									wx.showToast({ // 弹框提示
										title: '复制成功！' 
									});
								},
								fail(res2){
									console.log("获取复制内容失败",res2);
								}
							})
						},
						fail(res3){
							console.log("复制出错了",res3);
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		padding: 130rpx 60rpx 0 60rpx;
		box-sizing: border-box;
		position: relative;

		.back_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 260rpx;
			background-image: url("http://applet.atptest.com/uFA3XGtb1721639471090.png?v=1721639471638");
			background-repeat: no-repeat;
			background-position: 50% 100%;
			background-size: 150%;
			z-index: -1;
		}
		.list_container {
			width: 100%;
			height: 900rpx;
			background: rgb(255, 255, 255);
			box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.25);
			border-radius: 10rpx;

			.title {
				width: 100%;
				text-align: center;
				color: rgb(9, 8, 8);
				font-family: Inter;
				font-size: 40rpx;
				font-weight: 700;
				padding-top: 50rpx;
				padding-bottom: 40rpx;
				box-sizing: border-box;
			}

			.list {
				width: 100%;
				height: 830rpx;
				padding-top: 20rpx;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				border-top: 1px solid rgb(203, 202, 202);

				.list_item {
					width: 95%;
					height: 104rpx;
					background: rgb(255, 255, 255);
					margin-bottom: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					border: 1px solid rgb(230, 230, 230);
					box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.25);
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin: 0 auto 20rpx auto;

					.company {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: rgb(0, 0, 0);
						font-family: 思源黑体;
						font-size: 16rpx;
						font-weight: 400;
						border-bottom: 1px solid rgb(230, 230, 230);
						padding-bottom: 14rpx;
					}

					.amount {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: rgb(0, 0, 0);
						font-family: 思源黑体;
						font-size: 16rpx;
						font-weight: 400;
					}
				}
			}
		}

		.modal {
			display: flex;
			flex-direction: column;
			align-items: center;

			.modal_title {
				color: rgb(9, 8, 8);
				font-family: Inter;
				font-size: 36rpx;
				font-weight: 700;
				margin: auto;
			}

			.img_container {
				width: 390rpx;
				height: 390rpx;
				margin: 52rpx auto 50rpx auto;
			}

			.code_copy {
				width: 154rpx;
				height: 50rpx;
				background-color: rgb(62, 86, 186);
				border-radius: 8rpx;
				color: white;
				font-family: Inter;
				font-size: 22rpx;
				font-weight: 400;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 32rpx;
			}

			.modal_tip {
				width: 100%;
				border-top: 1px solid rgb(230, 230, 230);
				padding-top: 14rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-family: 思源黑体;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 32rpx;
				color: #BCBCBC;
			}
		}

	}
</style>